<template>
  <view :class="[ns.b, disabled && 'is-disabled', state.active && 'is-active']" @click="provideContext?.change(props)">
    <slot>{{ label ?? value }}</slot>
  </view>
</template>

<script lang="ts" setup>
import { inject, reactive, watch } from 'vue'
import Tab from '..'
import TabItem from '.'
import { useNamespace } from '@/utils'

defineOptions({
  name: TabItem.name
})
const props = defineProps(TabItem.props)
const ns = useNamespace(TabItem.name)
const provideContext = inject<Tab.ProvideContext>(Tab.provideName)
const state = reactive({
  active: false
})

watch(
  () => provideContext?.props.modelValue,
  () => state.active = provideContext?.isActive(props)!,
  { immediate: true }
)
</script>